<template>
    <div>
      <el-dialog title="授权角色" :visible.sync="authRole.show">
        <el-select v-model="authRole.roleIds" filterable multiple placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.id+''"
            :label="item.name"
            :value="item.id+''">
          </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer">
          <el-button @click="authRole.show=false">取 消</el-button>
          <el-button type="primary" @click="sumbitForm">确 定</el-button>
          <el-button @click="">重置</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>

  import {getUserRoleSelection} from '@/api/role/role'
  import {authRole} from "@/api/user/user";

  export default {
        name: "authRole",
      props:["authRole"],
      data() {
        return {
          options: [],
          default_data:[1,2,3]
        }
      },
      methods:{
        sumbitForm(){
          authRole({userId:this.authRole.userId,rids:this.authRole.roleIds.toString()}).then(response=>{
            if(response){
              this.$message({
                message: response.data.mesg,
                type: 'success',
                duration: 5 * 1000
              })
              this.authRole.show = false;
              this.$parent.$parent.$parent.onSearch()
              this.authRole.show=false;
            }
          })
        }


      },
      watch:{
        'authRole.userId':{
          handler(newValue, oldValue){
            console.log(this.authRole)
            // alert(1)
            getUserRoleSelection().then(response=>{
              let data=response.data.data;
              this.options=data;
            })
          }
        },

      },
      mounted(){

          // alert(111)

      }
    }
</script>

<style scoped>

</style>
